<template>
	<view class="wanl-order-list">
		<view class="navbar">
			<view class="nav-item text-df" v-for="(item, index) in navList" :key="item.state" :class="{ current: tabCurrentIndex === index }" @tap="tabClick(index)">
				{{ item.text }}
			</view>
		</view>
		<swiper :current="tabCurrentIndex" style="height: calc(100% - 80rpx)" duration="300" @change="changeTab">
			<swiper-item class="tab-content" v-for="(tag, key) in navList" :key="tag.id">
				<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData">
					<!-- 空白页 -->
					<wanl-empty text="没有找到任何订单" v-if="tag.loaded === true && tag.orderList.length === 0"/>
					<!-- 订单列表 -->
<!-- 					<view v-else style="height: 80rpx;margin: 20rpx;">
						
						<checkbox-group v-if="tabCurrentIndex != 2"  @change="change"  style="line-height: 80rpx;margin-left: 30rpx;float: left;">
								<checkbox class="orange" :class="checked == 1 ? 'checked' : ''"  :checked="checked == 1 ? true : false" value="1" />							
						</checkbox-group>	
						
						<button  v-if="tabCurrentIndex != 2"   class="cu-btn round margin-lr-bj wanl-bg-orange" style="float: right;"  @tap="changeSend(0)">{{ tabCurrentIndex == 0?'转平台配送':'转自行配送'}}</button>
						
						
					</view> -->
					<view v-for="(order, okey) in tag.orderList" :key="order.id" class="order-item radius-bock" >
						<view class="head">
							<view class="shop wanl-gray" @tap="onShop(order.shop_id)">
								<text class="wlIcon-dianpu1 wanl-black"></text>
								<text class="wanl-black margin-lr-xs text-30">{{ order.shopname}}</text>
								<text class="wlIcon-fanhuigengduo text-sm">[{{ $wanlshop.timeToDate(order.createtime) }}]</text>
							</view>
							
							<view class="margin-right-bj text-sm">
								<text class="state" >买家:{{ order.nickname }}</text>								
							</view>
			
						</view>
						<!-- 商品 -->
						<view class="goods-box"  @tap="()=>orderDetails(order.id)">
							<view class="cu-avatar xl margin-right-bj radius" :style="{backgroundImage: 'url('+$wanlshop.oss(order.image, 70, 70)+')'}"> </view>
							<view class="content margin-right-bj">
								<view class="describe">
									<view class="text-cut-2">
										{{order.title}}
									</view> 
								   <view style="clear: both;clear: both;font-size: 14px;color: gray;">
									配送方式：
									<text v-if="order.type1" :style="{color:(order.type1 == 1?'#F59B48':'')}">{{order.type1 == 1?'自行配送':'平台配送'}}
									   <text style="font-size: 14px;color: gray;">({{order.state==2?'待发货':(order.state==3?'已发货':'已收货')}})</text>
									</text>
									<text v-else style="color:#FF5546;border-bottom: solid 2px #FF5546;" @tap="()=>showsheet(order.id,okey)">请选择</text>
								   </view>
								</view>
						
								<view class="parameter">						
									<view class="text-min wanl-gray">
										x {{ order.number }}
									</view>							
								</view>
							</view>
							
						</view>
						<!-- 底部 -->
				
			
						<view class="action-box padding-bottom-bj">
							<button class="cu-btn round line-black" @tap="$wanlshop.phone(order.mobile)">联系买家</button>		
							<button class="cu-btn round margin-lr-bj wanl-bg-orange"  v-if="order.state == 2 && order.type1 == 1"  @tap="()=>showsheet2(order.id,okey)">确认发货</button>
							
							<button class="cu-btn round margin-lr-bj wanl-bg-orange"  v-if="order.state == 3 && user.partner.type1 == 1" @tap="()=>showsheet3(order.id,okey)">确认买家已收货</button>
				
						</view>
				
					</view>					
					<uni-load-more :status="tag.loadingType" :content-text="contentText"/>
					<view class="edgeInsetBottom"></view> 
				</scroll-view>
			</swiper-item>
		</swiper>
        <nxc-fh v-if="show" v-on:close="handleCallMethod" :kds="kds" :fhid="fhid" :list="list" ></nxc-fh>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import nxcFh from '@/components/nxc-fh/nxc-fh.vue';
export default {
    components: {'nxc-fh': nxcFh},
	data() {
		return {
			tabCurrentIndex: 0,
			navList: [	
				{				
					state: 0,
					text: '待发货',
					loadingType: 'more',
					current_page: 1,
					orderList: []
				},	
				{					
					state: 1,
					text: '待收货',
					loadingType: 'more',
					current_page: 1,
					orderList: []
				},
				{					
					state: 2,
					text: '已收货',
					loadingType: 'more',
					current_page: 1,
					orderList: []
				}
			],
			id:0,
			contentText: {
				contentdown: ' ',
				contentrefresh: '正在加载...',
				contentnomore: ''
			},
			kds:{},//快递公司列表
			show:false,
			fhid:0,
			fhi:0,
			list:[]
		
		};
	},
	computed: {
		...mapState(['user'])		
	},
	onLoad(options) {
		this.tabCurrentIndex = +options.state;
		this.id = options.id;
		// #ifndef MP
		this.loadData();
		// #endif
		// #ifdef MP
		if (options.state == 0) {
			this.loadData();
		}
		// #endif
	},
	methods: {
		//获取订单列表
		async loadData(source) {
			//这里是将订单挂载到tab列表下
			let index = this.tabCurrentIndex;
			let navItem = this.navList[index];
			let state = navItem.state;
			//判断是否最后一页
			if (navItem.loadingType == 'noMore') {
				return;
			}
			//tab切换只有第一次需要加载数据
			if (source === 'tabChange' && navItem.loaded === true) {
				return;
			}
			//防止重复加载
			if (navItem.loadingType === 'loading') {
				return;
			}
			navItem.loadingType = 'loading';
			// 获取列表
			await uni.request({
				url: '/wanlshop/ddporder/getOffinesList3',
				data: {
					id: this.id,
					state: state,
					page: navItem.current_page
				},
				method:'POST',
				success: res => {
					navItem.current_page = res.data.current_page; //当前页码
					if (res.data.last_page === res.data.current_page) {
						navItem.loadingType = 'noMore';
					} else {
						navItem.loadingType = 'more';
						navItem.current_page++;
					}
					console.log(res.data.data);
					let orderList = res.data.data.filter(item => {
						//添加不同状态下订单的表现形式				
						item = Object.assign(item, this.orderStateExp(item.state));						
						
						//演示数据所以自己进行状态筛选
						if (state === 0) {
							//0为全部订单
							return item;
						}
						return true;
					});
					console.log(orderList);
					orderList.forEach(item => {
						navItem.orderList.push(item);
					});
					console.log(navItem);
					//loaded新字段用于表示数据加载完毕，如果为空可以显示空白页
					this.$set(navItem, 'loaded', true);
				}
			});
			uni.request({
				url: '/wanlshop/ddp/getKds',
				data: {},
				method:'POST',
				success: res => {
					this.kds = res.data;
					let list = [];
						this.kds.forEach(item => {
							list.push(item.name);
						});
					this.list = list;	
				}
			});
		},
		
		showsheet(id,i) {
			console.log(id);
			let index = this.tabCurrentIndex;
			let navItem = this.navList[index];
			let that = this;
			uni.showActionSheet({
				itemColor: "#FE6800", 
				title:"配送方式，选择后将不过更改",
				itemList: [
					'自行配送',
					'平台配送'
				],
				success: (res) => {	
					uni.showModal({
						title: '提示：',
						content: '你确定要选择'+(res.tapIndex==0?'自行配送':'平台配送')+'？',
						success: function(res1) {
							if (res1.confirm) {
								navItem.orderList[i].type1= res.tapIndex+1;
									console.log(id);
								that.changeSend(id,res.tapIndex+1);
							} else if (res.cancel) {							
								return;
							}
						 },
						 fail:function(res1) {
							return;
						 }
					});
					
					 		   
				},
				fail: (err) => {
				  console.log('弹窗取消');
				}
			});
		}, 
		showsheet2(id,i){
			let index = this.tabCurrentIndex;
			let navItem = this.navList[index];
			let that = this;
			that.fhid = id;
			that.fhi = i;
			that.show = true;
			// uni.showModal({
			// 	title: '提示：',
			// 	content: '确认修改状态为已发货？',
			// 	success: function(res1) {
			// 		if (res1.confirm) {
			// 			navItem.orderList[i].state= 3;	
			// 			that.changeState(id,3);
			// 		} else if (res.cancel) {							
			// 			return;
			// 		}
			// 	 },
			// 	 fail:function(res1) {
			// 		return;
			// 	 }
			// });
		},
		
		closesheet2(){
			this.show = false;
		},
		closesheet3(){
			let index = this.tabCurrentIndex;
			let navItem = this.navList[index];
			navItem.orderList[this.fhi].state= 3;	
			this.show = false;		
		},
		handleCallMethod(methodName) {
		  this[methodName]();
		},
		
		showsheet3(id,i){
			let index = this.tabCurrentIndex;
			let navItem = this.navList[index];
			let that = this;
			uni.showModal({
				title: '提示：',
				content: '确认修改状态为买家已收货？',
				success: function(res1) {
					if (res1.confirm) {
						navItem.orderList[i].state= 4;	
						that.changeState(id,4);
					} else if (res.cancel) {							
						return;
					}
				 },
				 fail:function(res1) {
					return;
				 }
			});
		},
		
		CheckboxChange(id,i,e) {
			 this.navList[this.tabCurrentIndex].orderList[i].checked = Number(e.detail.value['0']);			
			},
		//swiper 切换
		changeTab(e) {
			this.tabCurrentIndex = e.target.current;
			this.loadData('tabChange');
		},
		//顶部tab点击
		tabClick(index) {
			this.tabCurrentIndex = index;
		},



		//订单状态文字和颜色
		orderStateExp(state) {
			let stateTip = '',
				stateTipColor = '#333',
				checked = 0;
			switch (+state) {
				case 2:
					stateTip = '待发货';					
					break;
				case 3:
					stateTip = '待提货';
					stateTipColor = '#f40';
					break;
				case 4:
					stateTip = '已提货';
					break;		
				//更多自定义
			}
			return {
				checked,
				stateTip,
				stateTipColor
			};
		},
		change(e){			
			if(e.detail.value == 1){
				this.checked = 1;
				this.navList[this.tabCurrentIndex].orderList.filter(item => {
				        item.checked =1;  						
						return item;					
					});
			}else{
				this.checked = 0;
				this.navList[this.tabCurrentIndex].orderList.filter(item => {
				        item.checked =0;  						
						return item;					
					});
			}
			
		},
		changeSend(id,type1){
			console.log(id);
			uni.request({
				url: '/wanlshop/ddporder/changeSend',
				data: {					
					id:id,
					type1:type1			
				},
				method:'POST',
				success: res => {
					
				}
			});
		},
		changeState(id,state){
			uni.request({
				url: '/wanlshop/ddporder/changeState',
				data: {					
					id:id,
					state:state			
				},
				method:'POST',
				success: res => {
					
				}
			});
		}
		 
	
	}
};
</script>

<style>
page {
	height: 100%;
}
</style>
